<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#7F7F7F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<view class="imageTopBox"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/OneDrive_6_11-16-2021/2x/pic_banner01@2x.png"></image></view>
			<view class="tabTopBox">
				<view
					class="tabTopItem"
					:style="{ margin: index === 1 ? '0 1px' : 0, backgroundColor: tabBg === item.id ? '#CD001B' : '#7f7f7f' }"
					@tap="tabbtn(item.id)"
					v-for="(item, index) in tabList"
					:key="index"
				>
					{{ item.text }}
				</view>
			</view>
			<view class="loadingBox" v-if="loading"><uni-load-more :showText="false" color="#333" status="loading"></uni-load-more></view>
			<view class="" v-else>
				<Journalism-one v-if="tabBg === 1" :newListOne="newListOne" :newListOnePagination="newListOnePagination" @paginationChange="paginationChangeOne"></Journalism-one>
				<Journalism-two v-else :newListTwo="newListTwo" :newListTwoPagination="newListTwoPagination" @paginationChangeTwo="paginationChangeTwo"></Journalism-two>
			</view>

			<!-- 内容 -->
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<!-- 底部菜单 -->
		<bottom-pages :isFixed="isFixedBox" v-show="!loading"></bottom-pages>
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import bottomPages from '@/pages/home/bottomPages.vue'; // 底部
import JournalismOne from './JournalismOne.vue';
import JournalismTwo from './JournalismTwo.vue';
import { baseUrl } from '@/utils/http.js';
import { getStorage } from '@/utils/setStorage.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0,
			windowHeight: 0,
			back_k: 0, // 物理返回
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			tabBg: 1,
			resNum: 30000, // 请求超时时间
			bigImgItemText: 'news',
			loading: false, // 加载效果
			loadingTime: '', // 定时
			newListOnePagination: {
				PageSize: 10, // 条数
				ShowPageSize: 7, // 显示几个
				Total: 0, // 总数
				CurrentPage: 1 // 当前页数
			},
			newListOne: [],
			newListTwoPagination: {
				PageSize: 10, // 条数
				PageSize: 7, // 显示几个
				Total: 0, // 总数
				CurrentPage: 1 // 当前页数
			},
			bigImgItemText2: 'notice',
			newListTwo: []
			// tabList: [
			// 	{
			// 		text: this.$t('Journalism').ctwfont1,
			// 		id: 1
			// 	},
			// 	{
			// 		text: this.$t('Journalism').ctwfont2,
			// 		id: 2
			// 	}
			// ]
		};
	},
	onLoad(option) {
		const { pages } = option;
		this.tabBg = Number(pages) || 1;
		// 拦截物理返回键
		this.goBackBox();
		this.tabbtn(this.tabBg);
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onHide() {
		if (this.$refs.SetUpPopup) {
			this.$refs.SetUpPopup.close();
		}
		if (this.$refs.signOutBox) {
			this.$refs.signOutBox.close();
		}
		this.popupIsShow = false;
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
				that.windowHeight = res.windowHeight;
			}
		});
	},
	components: { setUpPages, signOut, bottomPages, JournalismOne, JournalismTwo },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('Journalism');
		},
		tabList() {
			const arr = [
				{
					text: this.$t('Journalism').ctwfont1,
					id: 1
				},
				{
					text: this.$t('Journalism').ctwfont2,
					id: 2
				}
			];
			return arr;
		},
		// 底部是否定位
		isFixedBox() {
			if (this.tabBg === 1) {
				if (this.newListOnePagination.Total >= 5) {
					return false;
				} else {
					return true;
				}
			} else {
				if (this.newListTwoPagination.Total >= 5) {
					return false;
				} else {
					return true;
				}
			}
		}
	},
	methods: {
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: '/pages/home/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/home/index');
							// #endif
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		// 返回home
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			this.tabbtn(this.tabBg);
		},
		// 点击tab
		tabbtn(val) {
			if (val === 1) {
				this.getNewList();
			} else {
				this.getNoticeList();
			}
			this.tabBg = val;
		},
		// 新闻切页
		paginationChangeOne(val) {
			this.newListOnePagination.CurrentPage = val;
			this.getNewList();
		},
		paginationChangeTwo(val) {
			this.newListTwoPagination.CurrentPage = val;
			this.getNoticeList();
		},
		// 新闻
		async getNewList() {
			this.loading = true;
			this.loadingTime = setTimeout(() => {
				this.loading = false;
			}, this.resNum);
			const { PageSize, CurrentPage } = this.newListOnePagination;
			const lang = getStorage('language') || 'th';
			let text = '';
			if (lang === 'zh') {
				text = this.bigImgItemText.toLowerCase() + '_chinese';
			} else if (lang === 'en') {
				text = this.bigImgItemText.toLowerCase() + '_english';
			} else {
				text = this.bigImgItemText.toLowerCase() + '_thai';
			}
			const params = {
				number: text,
				isPage: '1',
				limit: PageSize,
				page: CurrentPage,
				isShowDetail: '0'
			};
			const { data: res } = await this.$http(true, 'api/info/infoList', params, 'GET');
			this.loading = false;
			clearTimeout(this.loadingTime);
			if (res.errno === 0) {
				this.newListOnePagination.Total = res.data.total;
				if (res.data.list.length > 0) {
					// res.data.list.forEach(item => {
					// 	if (item.smallImage) {
					// 		item.smallImage = baseUrl + item.smallImage;
					// 	}
					// });
					this.newListOne = res.data.list;
				} else {
					uni.showToast({
						title: 'No data',
						icon: 'none',
						position: 'top'
					});
				}
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 文章
		async getNoticeList() {
			this.loading = true;
			this.loadingTime = setTimeout(() => {
				this.loading = false;
			}, this.resNum);
			const { PageSize, CurrentPage } = this.newListTwoPagination;
			const lang = getStorage('language') || 'zh';
			let text = '';
			if (lang === 'zh') {
				text = this.bigImgItemText2.toLowerCase() + '_chinese';
			} else if (lang === 'en') {
				text = this.bigImgItemText2.toLowerCase() + '_english';
			} else {
				text = this.bigImgItemText2.toLowerCase() + '_thai';
			}
			const params = {
				number: text,
				isPage: '1',
				limit: PageSize,
				page: CurrentPage,
				isShowDetail: '0'
			};
			const { data: res } = await this.$http(true, 'api/info/infoList', params, 'GET');
			this.loading = false;
			clearTimeout(this.loadingTime);
			if (res.errno === 0) {
				this.newListTwoPagination.Total = res.data.total;
				if (res.data.list.length > 0) {
					// res.data.list.forEach(item => {
					// 	if (item.smallImage) {
					// 		item.smallImage = baseUrl + item.smallImage;
					// 	}
					// });
					this.newListTwo = res.data.list;
				} else {
					uni.showToast({
						title: '暂无数据',
						icon: 'none',
						position: 'top'
					});
				}
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}
}
.loadingBox {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: rgba(0, 0, 0, 0.5);
}
.zhuti {
	.imageTopBox {
		width: 100%;
		height: 100px;
	}
	.tabTopBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tabTopItem {
			flex: 1;
			text-align: center;
			height: 30px;
			line-height: 30px;
			color: #e3e3e3;
			font-size: $uni-font-size-custom-b;
			background-color: #7f7f7f;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
}
</style>
